<template>
    <div>
        <!-- 这里的ref的名称要和下面定义的名称要一样 -->
        <div ref="div1">123222</div>
        <!-- 引入导入的Ex17组件 -->
        <Ex17 ref="ex17"></Ex17>    
    </div>
</template>


<script setup>
//注意这里 有些不用的包不要导入到{}中，否则会报错
import { ref, onMounted } from 'vue'
//导入Ex17
import Ex17 from './Ex17-watchEffect.vue'

/**
 * 要获取真实dom（上面的template里面的数据）和组件实例，需要使用ref和expose
 *      ref：用于获取组件实例
 *      expose：用于暴露组件实例的方法
 *      ref和expose必须配合使用
 * 
 */
const div1 = ref(null)
const ex17 = ref(null)

//使用onMounted去获取真实dom
onMounted(()=>{
    console.log('div1',div1.value)
    console.log('ex17',ex17.value)
})

</script>


<style>
    
</style>